<template>
  <div id="container">
    <el-descriptions title="用户信息">
      <el-descriptions-item label="用户名">{{obj.user_nickname}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{obj.user_phone}}</el-descriptions-item>
      <el-descriptions-item label="购买产品">{{arr_obj.productName}}</el-descriptions-item>
      <el-descriptions-item label="数量">
        {{arr_obj.quantity}}
      </el-descriptions-item>
      <el-descriptions-item label="总价">
        {{obj.total_fee}}
      </el-descriptions-item>
      <el-descriptions-item label="订单编号"
        >{{obj.order_id}}</el-descriptions-item
      >
    </el-descriptions>
    <div id="erweima">
        <div class="box">
          <h2>请使用微信扫码支付</h2>
          <img :src="payEWM" alt="">
        </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/api'
import qrcode from "qrcode"
   export default {
     data(){
       return {
         order_id:"",
         obj:{},
         arr_obj:{},
         payEWM:""
       }
     },
     mounted(){
        //  console.log(this.$route.params.order_id);
       this.order_id = this.$route.params.order_id
       //3.如果刷新了页面就要重新返回预支付页面提交交易
       if(!this.order_id){
         //有可能用户刷新了页面
         this.$alert("请勿刷新页面，本次交易取消，请重新提交","提示",{
           confirmButtonText:"ok",
           callback:action=>{
             this.$router.push({name:"preorder"})
           }
         })
       }else{
         //1.请求订单详情，渲染
        api.getOrderApi(this.order_id)
        .then(res=>{
          console.log(res);
          this.obj=res.data.data
          this.arr_obj=this.obj.orderDetail[0]
        })
        //2.获取WeChat支付地址=>二维码，渲染到页面
        api.goPayingApi(this.order_id)
        .then(res=>{
          console.log(res.data.code_url);
          qrcode.toDataURL(res.data.code_url,(err,dataURL)=>{
            this.payEWM=dataURL
          })
        })
        //轮询查询支付状态，判断跳转对应页面
        this.queryPayStatus = setInterval(() => {
          api.checkOrderResultApi(this.order_id)
          .then(res=>{
            if(res.data.state){
              //支付成功
              //清除定时器
              clearInterval(this.queryPayStatus)
              //跳转页面
              this.$router.push({
                name:"paysuccess"
              })
            }
          })
        }, 200);

       }
     },
     beforeDestroy() {
       clearInterval(this.queryPayStatus)
     },
   }
</script>
